﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Custom content</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="appbarcommand.css" rel="stylesheet" />
    <script src="appbarcommand.js"></script>
</head>
<body>
    <div class="appbarcommand fragment">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to appbarcommand</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="appbarcommand_appbar" data-win-control="WinJS.UI.AppBar">
                <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'textButton',type:'content',section:'selection',firstElementFocus:select('p')}">
                    <div style="width: 100px; height: 100px; border: solid 1px green;">
                        <p>hi</p>
                    </div>
                </div>
                <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'inputButton',type:'content',section:'selection',firstElementFocus:select('input')}">
                    <div style="width: 100px; height: 100px; border: solid 1px green;">
                        <input style="width: 90px; border: solid 1px gray;" />
                    </div>
                </div>
                <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'inputButton',type:'content',section:'selection',firstElementFocus:select('.boatType')}">
                    <div style="width: 100px; height: 100px; border: solid 1px green;">
                        <select class="boatType" style="width:90px;">
                            <option>Schooner</option>
                            <option>Ketch</option>
                            <option>Yawl</option>
                            <option>Sloop</option>
                        </select>
                    </div>
                </div>
                <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'videoButton',type:'content',section:'selection'}">
                    <video src="/demos/html5video/butterfly.mp4" autoplay loop controls style="width: 100px; height: 100px;"></video>
                </div>
            </div>
        </section>
    </div>
</body>
</html>
